<template>
  <el-tabs v-model="active" tab-position="left" @input="handleInput">
    <el-tab-pane
      v-for="(item,i) in list"
      :key="i"
      :label="item.__config__.label"
      :name="item.__config__.label"
    >
      <el-row :gutter="20" v-if="active==item.__config__.label">
        <el-col :span="16">
          <el-row :gutter="20">
            <el-col :span="12">
              <FGPcForm v-if="!loading" v-model="form" />
            </el-col>
            <el-col :span="12">
              <FGPhoneForm v-if="!loading" v-model="form" />
            </el-col>
          </el-row>

          <Code :code="value" />
        </el-col>
        <el-col :span="8">
          <FormGeneratorAttrField :fieldConf.sync="value" @tag-change="handleChange" />
        </el-col>
      </el-row>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import Code from "@/views/coms/components/Code";
import FGPcForm from "@/package/FGPcForm";
import FGPhoneForm from "@/package/FGPhoneForm";

import {
  formConf,
  inputComponents,
  selectComponents,
  layoutComponents
} from "@/components/formGenerator/utils/config";

import FormGeneratorAttrField from "@/components/formGenerator/components/formGeneratorAttrField.vue";
import { deepClone } from "@/components/formGenerator/utils";
export default {
  components: {
    Code,
    FGPcForm,
    FGPhoneForm,
    FormGeneratorAttrField
  },
  data() {
    return {
      value: inputComponents[0],
      active: inputComponents[0].__config__.label,
      form: "",
      loading: false
    };
  },
  computed: {
    list() {
      return [...inputComponents, ...selectComponents, ...layoutComponents].map(
        (item, i) => {
          return {
            ...item,
            __vModel__: "field" + i,
            formId: "field" + i
          };
        }
      );
    }
  },

  watch: {
    value: {
      immediate: true,
      deep: true,
      handler(newValue) {
        if (newValue) {
          this.form = JSON.stringify({
            ...formConf,
            labelPosition: "top",
            list: [this.value]
          });
          this.loading = true;
          this.$nextTick(() => {
            this.loading = false;
          });
        }
      }
    }
  },
  methods: {
    handleInput(val) {
      this.value = this.list.find(item => item.__config__.label == val);
    },
    handleChange(value) {
      this.value = value;
      this.active = value.__config__.label;
    }
  }
};
</script>


<style lang="scss" scoped>
</style>